<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:a4j="http://richfaces.org/a4j"
      xmlns:rich="http://richfaces.org/rich">

    <ui:composition template="/template.xhtml">
        <ui:define name="title">
            <h:outputText value="Crear Proyecto"></h:outputText>
        </ui:define>
        <ui:define name="body">
            <h:panelGroup id="messagePanel" layout="block">
                <h:messages errorStyle="color: red" infoStyle="color: green" layout="table"/>
            </h:panelGroup>
            <h:form>
                <rich:tabPanel switchType="client">
                    <rich:tab header="Información General">
                        <h:panelGrid columns="2">
                            <h:outputLabel value="Nombre" for="nombre" />
                            <h:inputTextarea id="nombre" value="#{proyectoController.selected.nombre}" rows="3" cols="40" required="true" requiredMessage="Se requiere el título del proyecto"/>
                            <h:outputLabel value="Fecha de Inicio" for="fechaInicio" />
                            <rich:calendar id="fechaInicio" value="#{proyectoController.selected.fechaInicio}" 
                                           datePattern="dd/M/yy"/> 
                            <h:outputLabel value="Fecha de Finalización" for="fechaFin" />
                            <rich:calendar id="fechaFin" value="#{proyectoController.selected.fechaFin}" 
                                           datePattern="dd/M/yy"/> 
                            <h:outputLabel value="Resumen" for="abstract1" />
                            <h:inputTextarea id="abstract1" value="#{proyectoController.selected.abstract1}"  rows="3" cols="40"/>
                            <h:outputLabel value="Metodología" for="metodologia" />
                            <h:inputTextarea id="metodologia" value="#{proyectoController.selected.metodologia}"  rows="3" cols="40"/>
                            <h:outputLabel value="Resultados" for="resultados" />
                            <h:inputTextarea id="resultados" value="#{proyectoController.selected.resultados}"  rows="3" cols="40"/>
                            <h:outputLabel value="Conclusiones" for="conclusiones" />
                            <h:inputTextarea id="conclusiones" value="#{proyectoController.selected.conclusiones}" rows="3" cols="40" />
                            
                        </h:panelGrid>
                    </rich:tab>
                    <rich:tab header="Información Complementaria">
                        <h:panelGrid columns="2">
                            <h:outputLabel value="Entidad Responsable" for="entidad" />
                            <rich:select id="entidad" value="#{proyectoController.selected.entidad}" >
                                <f:selectItems value="#{entidadController.itemsAvailableSelectOne}"/>
                            </rich:select>
                           <h:outputLabel value="Líder del proyecto" for="lider" />
                           <h:inputTextarea id="lider" value="#{proyectoController.selected.lider}" />
                            <h:outputLabel value="Página Web" for="paginaWeb" />
                            <h:inputTextarea id="paginaWeb" value="#{proyectoController.selected.paginaWeb}" />
                            
                            <h:outputLabel value="Investigador Responsable" for="investigador" />
                            <rich:select id="investigador" value="#{proyectoController.selected.investigador}" title="#{bundle.CreateIdeaTitle_investigador}" >
                                <f:selectItems value="#{investigadorController.itemsAvailableSelectOne}"/>
                            </rich:select>
                            
                            <h:outputLabel value="Gran Área de Investigación" />
                            <rich:select id="areainvestigacion" value="#{proyectoController.selected.areainvestigacion}" valueChangeListener="#{areainvestigacionController.cambioAreaListener}">
                                <f:selectItems value="#{areainvestigacionController.itemsAvailableSelectOne}"/>
                                <a4j:ajax event="selectitem" render="subarea" execute="@this" />
                            </rich:select>
                            <h:outputLabel value="Área" for="subarea" />
                            <rich:select id="subarea" value="#{proyectoController.selected.subarea}" valueChangeListener="#{subareaController.cambioAreaListener}">
                                <f:selectItems value="#{areainvestigacionController.itemsAvailableSelectOneByArea}"/>
                                <a4j:ajax event="selectitem" render="subarea1" execute="@this" />
                            </rich:select>
                            <h:outputLabel value="Subárea" for="subarea1" />
                            <rich:select id="subarea1" value="#{proyectoController.selected.subarea1}" listWidth="500" valueChangeListener="#{subarea1Controller.cambioSubAreaListener}">
                                <f:selectItems value="#{subareaController.itemsAvailableSelectOneByArea}"/>
                                <a4j:ajax event="selectitem" render="especialidad" execute="@this" />
                            </rich:select>
                            <h:outputLabel value="Especialidad" for="especialidad"  />
                            <rich:select id="especialidad" value="#{proyectoController.selected.subarea2}" listWidth="500">
                                <f:selectItems value="#{subarea1Controller.itemsAvailableSelectOneBySubArea}"/>
                            </rich:select>
                            <h:outputLabel value="País" for="pais" />
                            <rich:select id="pais" value="#{proyectoController.selected.pais}" valueChangeListener="#{paisController.cambioPaisListener}"  >
                                <f:selectItems value="#{paisController.itemsAvailableSelectOne}"/>
                                <a4j:ajax event="selectitem" render="departamento" execute="@this" />
                            </rich:select>
                            <h:outputLabel value="Departamento" for="departamento" />
                            <rich:select id="departamento" value="#{proyectoController.selected.departamento}"  valueChangeListener="#{departamentoController.cambioPaisListener}">
                                <f:selectItems value="#{paisController.itemsAvailableSelectOneByPais}"/>
                                <a4j:ajax event="selectitem" render="municipio" execute="@this" />
                            </rich:select>
                            <h:outputLabel value="Municipio" for="municipio" />
                            <rich:select id="municipio" value="#{proyectoController.selected.municipio}"  >
                                <f:selectItems value="#{departamentoController.itemsAvailableSelectOneByDepto}"/>
                            </rich:select>
                        </h:panelGrid>
                    </rich:tab>
                    <rich:tab header="Documentación">
                        <h:panelGrid  columns="1">
                            <a4j:commandButton value="Adicionar Documento" onclick="#{rich:component('popupDoc')}.show()" render="textDocs" execute="@this"/> 
                            <rich:panel id="documentos">
                                <rich:dataTable value="#{proyectoController.selected.documentacionList}" var="docs" iterationStatusVar="it" >
                                    <f:facet name="header">Documentos</f:facet>
                                    <rich:column>
                                        <f:facet name="header">#</f:facet>
                                        #{it.index+1}
                                    </rich:column>
                                    <rich:column> 
                                        <f:facet name="header">Link</f:facet> 
                                        #{docs.link}
                                    </rich:column>
                                    <rich:column> 
                                        <f:facet name="header">Descripción</f:facet> 
                                        #{docs.descripcion}
                                    </rich:column>
                                    <rich:column>
                                        <a4j:commandLink value="Eliminar" execute="@this" action="#{proyectoController.eliminarDocumento(it.index)}"
                                                         render="documentos" >
                                        </a4j:commandLink>
                                    </rich:column>
                                </rich:dataTable>
                            </rich:panel>
                        </h:panelGrid>
                    </rich:tab>
                </rich:tabPanel>

                <br />
                <h:commandLink action="#{proyectoController.create}" value="Guardar" />
            </h:form>
            <rich:popupPanel id="popupDoc" modal="true" resizeable="false" autosized="false" 
                             onmaskclick="#{rich:component('popupDoc')}.hide()" height="240" width="320">
                <f:facet name="header">
                    <h:outputText value="Adición de Documento" />
                </f:facet>
                <f:facet name="controls">
                    <h:outputLink value="#"
                                  onclick="#{rich:component('popupDoc')}.hide(); return false;">
                        X
                    </h:outputLink>
                </f:facet>
                <h:form>
                    <rich:panel id="textDocs">
                        <h:panelGrid  columns="2" style="text-align: center; vertical-align: middle">
                            <h:outputText value="Descripción del Documento"/>
                            <h:inputTextarea id="textDesc" value="#{documentacionController.selected.descripcion}" cols="30" rows="2"/>
                            <h:outputText value="Link"/>
                            <h:inputTextarea id="textDoc" value="#{documentacionController.selected.link}" cols="30" rows="2"/>
                            <a4j:commandButton  value="Adicionar" action="#{documentacionController.adicionarDocumentoProyecto(proyectoController.selected)}" 
                                                render="documentos" oncomplete="if (#{facesContext.maximumSeverity==null}) 
                                                #{rich:component('popupDoc')}.hide();"/>
                            
                        </h:panelGrid>
                    </rich:panel>
                </h:form>

            </rich:popupPanel>
        </ui:define>
    </ui:composition>

</html>
